<template>
  <van-tabbar v-model="active" @change="changeTabs">
    <van-tabbar-item icon="home">首页</van-tabbar-item>
    <van-tabbar-item icon="wap-nav">分类</van-tabbar-item>
      <van-tabbar-item icon="member-day-privilege">导购专区</van-tabbar-item>
    <van-tabbar-item icon="cart" info="3">购物车</van-tabbar-item>
    <van-tabbar-item icon="contact">我</van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods:{
    changeTabs (v) {
      let tabs = ['home','category','vip','cart','my']
      this.$router.push({path: '/' + tabs[this.active]})
    }
  },
  watch: {
    $route(to, from) {
      if (to.path.includes('home')) {
        this.active = 0;
      } else if (to.path.includes('category')) {
        this.active = 1;
      } else if (to.path.includes('vip')) {
        this.active = 2;
      } else if (to.path.includes('cart')) {
        this.active = 3;
      } else if (to.path.includes('my')) {
        this.active = 4;
      }else{
        this.active = 0;
      }
      // if (to.path.includes('proDetail')) {
      //   this.page = 'content-right'
      // } else if (from.path.includes('proDetail')) {
      //   this.page = 'content-left'
      // } else {
      //   this.page = 'fadeIn'
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/common.scss';
.van-hairline--top-bottom{
  height: 50px;
  z-index: 100;
  box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
  -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
}
</style>
